<template>
  <div>
    <template>
      <!--页头组件-->
      <el-page-header style="background-color: #0095d7;color: white;line-height: 60px"
                      @back="goBack" content="增加用户页面"></el-page-header>
      <!--分割线-->
      <el-divider></el-divider>
      <!--name代表上传文件时 文件的参数名
          limit="1" 设置只能选择一张图片
      -->
      <el-card>
        <el-form :model="user" :rules="rules" ref="ruleForm">
          <el-form-item prop="username" label="用户名" label-width="80px">
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码" label-width="80px">
            <el-input v-model="user.password" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item prop="name" label="姓名" label-width="80px">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item prop="idNumber" label="身份证" label-width="80px">
            <el-input v-model="user.idNumber"></el-input>
          </el-form-item>
          <el-form-item prop="age" label="年龄" label-width="80px">
            <el-input v-model="user.age"></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="手机号" label-width="80px">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" label-width="80px">
            <el-input v-model="user.email" ></el-input>
          </el-form-item>
          <el-form-item label="身份" label-width="80px">
            <el-input value="普通用户" readonly></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <el-input value="启用" readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-on:click="add('ruleForm')">增加用户</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user:{
          id:"",
          username:"",
          password:"",
          name:"",
          idNumber:"",
          age:"",
          phone:"",
          email:"",
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
          ],
          idNumber: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      add(formName){
        console.log("进入add方法")
        this.$refs[formName].validate((valid) => {
          console.log("进入判断")
          if (valid) {
            console.log("进入成功")
            let url = 'http://176.17.10.223:18080/user/add-new'
            let data = 'username='+ this.user.username +
                    "&password=" + this.user.password +
                    "&name=" + this.user.name +
                    "&idNumber=" + this.user.idNumber +
                    "&age=" + this.user.age +
                    "&phone=" + this.user.phone +
                    "&email=" + this.user.email +
                    "&isEnable=" + 1 +
                    "&roleId=" + 3 ;
            console.log("url=======" + url);
            console.log("data=======" + data);
            this.axios.post(url, data).then((response) => {
              let message = response.data.message;
              if (message == null){
                this.$message({
                  message: '恭喜你，添加用户成功',
                  type: 'success'
                });
                // 提交之后返回到用户管理页面
                this.$router.push({path: '/admin/manage/user'});  //页面路由刷新
              }else {
                console.log(message);
                this.$message.error(message);
              }
            })
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      goBack(){
        //返回上一页面
        history.back();
      }
    },
  }
</script>

<style>
  .el-input__inner {
    width: 500px;
  }
  .el-card{
    width: 100%;
    height: 100%;
  }
</style>